<!-- Task发布日志 -->
<template>
  <div ref="logdiv" class="wl-task-log" :style="{height: logHeight}">
    <div class="wl-task-log__body">
      <pre>
        <div v-for="log in logs" :key="log.id" class="wl-task-log__line">
          <a></a>
          <span :class="log.class">{{log.text}}</span>
        </div>
      </pre>
    </div>
  </div>
</template>

<script>

export default {
  name: 'TaskLog',
  data() {
    return {
      logid: 0,
      logs: [],
      sercnt: 0,
      scroll: false
    }
  },
  computed: {
    logHeight: function() {
      if (this.sercnt === 0) {
        return ''
      }
      return 'calc(100vh - ' + ((this.sercnt + 1) * 30) + 'px - 177px)'
    }
  },
  updated() {
    if (this.scroll) {
      this.$refs.logdiv.scrollTop = this.$refs.logdiv.scrollHeight
    }
  },
  methods: {
    setServerCount(cnt) {
      this.sercnt = cnt
    },
    addLog(data) {
      if (data === "") {
        return
      }
      this.scroll = ((this.$refs.logdiv.clientHeight + this.$refs.logdiv.scrollTop) === this.$refs.logdiv.scrollHeight)
      let log = {
        id: this.logid++,
        class: "command", // command, success
        text: '[' + data.user + '@' + data.host + ']$ ' + data.cmd
      }
      this.logs.push(log)
      if (data.success) {
        const strs = data.success.split("\r\n")
        for(let i in strs) {
          //let texts = strs[i].split(/\r/g)
          if (strs[i].length===0) {
            continue; 
          }
          this.logs.push({
            id: this.logid++,
            class: "success",
            text: strs[i]
          })
        }
      }
      if (data.error) {
        const strs = data.error.split("\r\n")
        for(let i in strs) {
          if (strs[i].length===0) {
            continue; 
          }
          this.logs.push({
            id: this.logid++,
            class: "error",
            text: strs[i]
          })
        }
      }
    },
    clearLog() {
      this.logs = []
    }
  }
}
</script>

<style scoped>
  /* LOG 样式 */
  .wl-task-log {
    margin-top: 5px;
    /* height: calc(100vh - 120px - 177px); */
    height: 200px;
    overflow-y: scroll;
    background-color: #222;
  }
  .wl-task-log span {
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 12px;
  }
  .wl-task-log__body {
    position: relative;
  }
  .wl-task-log__body pre {
    clear: left;
    min-height: 42px;
    padding: 15px 0;
    color: #f1f1f1;
    font-family: Cousine,monospace;
    font-size: 12px;
    line-height: 19px;
    white-space: normal;
    word-wrap: break-word;
    background-color: #222;
    counter-reset: a;
    margin-top: 0;
  }
  .wl-task-log__line {
    position: relative;
    margin: 0 50px;
    min-height: 19px;
    white-space: normal;
    border-left: 1px solid #666;
    padding: 0 10px;
  }
  .wl-task-log__line a {
    display: inline-block;
    text-align: right;
    min-width: 50px;
    cursor: pointer;
    text-decoration: none;
    position: absolute;
    color: #666;
    top: 0;
    left: -50px;
  }
  .wl-task-log__line a:before {
    content: counter(a);
    counter-increment: a;
    padding-right: 1em;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  }
  .wl-task-log__line .success {
    color: #bbb;
  }
  .wl-task-log__line .error {
      color: red;
  }
  .wl-task-log__line span {
    color: #b1fd79;
  }
</style>